<template>
  <div>
    <el-select clearable v-for="item, index in tagClass" :placeholder="index+1+'级分类'" v-model="models[index]" :key="index" @change="handleSelectClass(index)" @clear="handleClear(index)">
      <el-option v-for="item in item" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </div>
</template>
<script>
  export default {
    props: ['tagClass'],
    data () {
      return {
        models: new Array(10)
      }
    },
    methods: {
      handleSelectClass (index) {
        this.models.fill(null, index + 1)
        this.$emit('change', this.models[index], index)
      },
      handleClear (index) {
        this.models.fill(null, index + 1)
      }
    }
  }
</script>
